<%@ page import="java.util.List" %>
<%@ page import="com.ccc3gc.entity.User" %><%--
  Created by IntelliJ IDEA.
  User: 95184
  Date: 2024/9/18
  Time: 上午11:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.0.1/jquery.min.js"></script>
    <style>
        #shousuok {
            width: 200px;
            height: 35px;
        }

        #waibiank {
            background-color: white;
            position: absolute;
            width: 200px;
            border: rgba(119, 113, 115, 0.77) solid;
            display: none;
        }
    </style>
    <script>
        $(function () {
            $("#shousuok").keyup(function () {
                $.ajax({
                    type: 'post',
                    url: 'http://localhost:8080/getUserNames',
                    data: {
                        keyWord: $('#shousuok').val()
                    },
                    success(msg) {
                        var sobj = $("#waibiank");
                        sobj.html("");
                        var suggest = "";
                        var str = msg.split(",");
                        console.log(msg)
                        if (msg !== "" && str.length > 0 && str[0].length > 0) {
                            for (var i = 0; i < str.length; i++) {
                                suggest += "<div onmouseover='suggestOver(this);'";
                                suggest += " onmouseout='suggestOut(this);'";
                                suggest += " onclick='setSearch(this.innerHTML);'";
                                suggest += " class='suggest_link'>" + str[i] + "</div>";
                            }
                            sobj.html(suggest).css("display", "block");

                        } else {
                            sobj.css("display", "none");
                        }
                    }
                })
            })
        });

        function suggestOver(obj) {
            $(obj).css({"background": "lightblue", "color": "white"}).css("cursor", "pointer");
        }

        function suggestOut(obj) {
            $(obj).css({"background": "white", "color": "black"});
        }

        function setSearch(userName) {
            $("#shousuok").val(userName);
            $("#waibiank").css("display", "none");
        }
    </script>
</head>
<body>
<form action="userPage" method="post">
    <input type="text" size="30" name="keyword" autocomplete="off" placeholder="请输入搜索关键字" id="shousuok">
    <input type="submit" value="搜"/>
    <div id="waibiank"></div>
</form>
<a href="addUser.html">新增用户</a>
<table border="1px">
    <tr>
        <td>用户编号</td>
        <td>用户名</td>
        <td>操作</td>
    </tr>
    <%
        int pageIndex = (Integer) request.getAttribute("pageIndex");
        List<User> users = (List<User>) request.getAttribute("users");
        int totalPages = (Integer) request.getAttribute("totalPages");
        String keyword = (String) request.getAttribute("keyword");
        for (User user : users) {
    %>
    <tr>
        <td><%=user.getUserId()%>
        </td>
        <td>
            <a href="getUserDetail?userId=<%=user.getUserId()%>"><%=user.getUserName()%>
            </a>
        </td>
        <td><a href="changeUser?userId=<%=user.getUserId()%>">修改</a>
            <a href="removeUser?userId=<%=user.getUserId()%>">删除</a>
        </td>
    </tr>
    <%}%>
    <tr>
        <td colspan="3">
            <a href="userPage?keyword=<%=keyword%>&pageIndex=1">首页</a>
            <a href="userPage?keyword=<%=keyword%>&pageIndex=<%=pageIndex-1%>">上一页</a>
            <a href="userPage?keyword=<%=keyword%>&pageIndex=<%=pageIndex+1%>">下一页</a>
            <a href="userPage?keyword=<%=keyword%>&pageIndex=<%=totalPages%>">尾页</a>
        </td>
    </tr>
</table>
</body>
</html>
